<!--工单管理-->
<template>
    <div class="bodyDiv">
      <Header :position="position"></Header>
      <div style="display: flex;text-align: left">
        <el-card style="width: 100%;height: 873px;">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>故障管理</span>
            <el-button @click="drawer = true" style="float: right; padding: 5px 0" type="text">数据筛选</el-button>
          </div>
<!--          <div style="width: 100%">
            <el-select placeholder="选择故障类型" style="margin-right: 20px"></el-select>
            <el-select placeholder="选择知识库" style="margin-right: 50px"></el-select>
          </div>-->
          <el-table :data="testData"
                    style="width: 100%;"
                    ref="tableList"
                    height="740px">
            <el-table-column type="expand">
              <template slot-scope="props" style="z-index: 998;">
                <div style="width: 100%;">
                  <el-steps :active="props.row.progress" style="width: 80%;margin-left: 10%">
                    <el-step title="派单中"></el-step>
                    <el-step title="鉴定中"></el-step>
                    <el-step title="维修中"></el-step>
                    <el-step title="验收中"></el-step>
                    <el-step title="已关闭"></el-step>
                  </el-steps>
                  <el-form style="width: 100%;text-align: center" label-position="left" label-width="50px">
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px">
                      <el-form-item label="故障工单号" style="width: 50%">
                        <el-input v-model="props.row.id" style="width: 300px;margin-left: -200px" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="故障名" style="width: 50%">
                        <el-input v-model="props.row.fault" style="width: 300px;margin-left: -200px" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px">
                      <el-form-item label="设备号" style="width: 50%">
                        <el-input v-model="props.row.deviceId" style="width: 300px;margin-left: -200px" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="设备名" style="width: 50%">
                        <el-input v-model="props.row.device" style="width: 300px;margin-left: -200px" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px">
                      <el-form-item label="故障类型" style="width: 50%">
                        <el-select placeholder="选择故障类型" style="width: 300px;margin-left: -200px"></el-select>
                      </el-form-item>
                      <el-form-item label="知识库" style="width: 50%">
                        <el-select placeholder="选择知识库" style="width: 300px;margin-left: -200px"></el-select>
                      </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px; justify-content: space-between">
                      <el-form-item label="负责人" style="width: 33%">
                        <el-input v-model="props.row.principal" style="width: 250px;margin-left: -80px" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="负责人联系方式" style="width: 33%">
                        <el-input v-model="props.row.principalTel" style="width: 250px;margin-left: -80px" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="故障检测时间" style="width: 33%">
                        <el-input v-model="props.row.principalTel" style="width: 250px;margin-left: -80px" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px;justify-content: space-between">
                      <el-form-item label="工程师" style="width: 33%">
                        <el-input v-model="props.row.engineer" style="width: 250px;margin-left: -80px" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="工程师联系方式" style="width: 33%">
                        <el-input v-model="props.row.principalTel" style="width: 250px;margin-left: -80px" disabled></el-input>
                      </el-form-item>
                      <el-form-item label="派单时间" style="width: 33%">
                        <el-input v-model="props.row.finishDate" style="width: 250px;margin-left: -80px" disabled></el-input>
                      </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px;justify-content: space-between">
                      <el-form-item label="故障描述">
                        <el-input type="text"></el-input>
                      </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; white-space: nowrap; margin: 20px;justify-content: space-between">
                      <el-form-item label="总结">
                        <el-input v-model="props.row.summary" ></el-input>
                      </el-form-item>
                    </div>
                  </el-form>
                  <div style="width:500px;margin-left: calc(50% - 200px); margin-bottom: 50px">
                    <el-button style="margin-right: 50px; white-space: nowrap">暂时保存工作</el-button>
                    <el-button type="primary">提交进入下一步</el-button>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="工单号" prop="id"></el-table-column>
            <el-table-column label="模块" prop="device"></el-table-column>
            <el-table-column label="故障名" prop="fault"></el-table-column>
            <el-table-column label="开始日期" prop="beginDate"></el-table-column>
            <el-table-column label="负责人" prop="principal"></el-table-column>
            <el-table-column label="工程师" prop="engineer"></el-table-column>
          </el-table>
          <el-pagination style="margin-top:5px;"></el-pagination>
        </el-card>
        <transition name="plus-icon">
            <el-card style="margin-left: 10px" v-show="drawer" class="icon-plus">
              <div slot="header" style="display: flex; justify-content: space-between; white-space: nowrap">
                <h3 style="margin: 0px">数据筛选</h3>
                <el-button @click="drawer = false" style="float: right; padding: 3px 0" type="text">隐藏选项卡</el-button>
              </div>
              <div style="width: 100%">
                <el-select placeholder="选择车种" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-select placeholder="选择车型" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-select placeholder="选择车号" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-select placeholder="选择零件" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-select placeholder="选择监测点位" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-date-picker placeholder="选择日期" style="margin: 10px; width: calc(100% - 20px)"></el-date-picker>
                <el-select placeholder="选择故障类别" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-select placeholder="选择工单状态" style="margin: 10px; width: calc(100% - 20px)"></el-select>
                <el-select placeholder="选择负责人" style="margin: 10px; width: calc(100% - 20px)"></el-select>
              </div>
              <div style="white-space: nowrap;display: flex">
                <el-button style="border-radius: 20px; border-color: #ace0f9; width: 200px;margin-left: calc(50% - 100px); margin-top: 30px" @click="this.drawer=false">检索数据</el-button>
              </div>
            </el-card>
        </transition>
      </div>
      <!--<el-drawer
        title="数据筛选"
        :visible.sync="drawer"
        direction="rtl"
        :before-close="handleClose"
        :modal-append-to-body="false"
        size="300px">
        <div style="margin: 20px">
 &lt;!&ndash;         <div style="white-space: nowrap; display: flex;">
            <el-select placeholder="选择车种" style="margin: 10px;width: 50%"></el-select>
            <el-select placeholder="选择车型" style="margin: 10px;width: 50%"></el-select>
          </div>
          <div style="white-space: nowrap; display: flex;">
            <el-select placeholder="选择车号" style="margin: 10px;width: 50%"></el-select>
            <el-select placeholder="选择零件" style="margin: 10px;width: 50%"></el-select>
          </div>
          <div style="white-space: nowrap; display: flex;">
            <el-select placeholder="选择监测点位" style="margin: 10px;width: 50%"></el-select>
            <el-select placeholder="选择故障类别" style="margin: 10px;width: 50%"></el-select>
          </div>
          <div style="white-space: nowrap; display: flex;">
            <el-select placeholder="选择工单状态" style="margin: 10px;width: 40%"></el-select>
            <el-select placeholder="选择负责人" style="margin: 10px;width: 40%"></el-select>
            <el-date-picker placeholder="选择时间" style="margin: 10px;width: 20%"></el-date-picker>
          </div>&ndash;&gt;
          <div style="width: 100%">
            <el-select placeholder="选择车种" style="margin: 10px"></el-select>
            <el-select placeholder="选择车型" style="margin: 10px"></el-select>
            <el-select placeholder="选择车号" style="margin: 10px"></el-select>
            <el-select placeholder="选择零件" style="margin: 10px"></el-select>
            <el-select placeholder="选择监测点位" style="margin: 10px"></el-select>
            <el-date-picker placeholder="选择日期" style="margin: 10px"></el-date-picker>
            <el-select placeholder="选择故障类别" style="margin: 10px"></el-select>
            <el-select placeholder="选择工单状态" style="margin: 10px"></el-select>
            <el-select placeholder="选择负责人" style="margin: 10px"></el-select>
          </div>
          <div style="white-space: nowrap; display: flex;">

          </div>
          <div style="white-space: nowrap;display: flex">
            <el-button style="border-radius: 20px; border-color: #ace0f9; width: 200px;margin-left: calc(50% - 100px); margin-top: 30px" @click="this.drawer=false">检索数据</el-button>
          </div>
        </div>
      </el-drawer>-->
    </div>
</template>

<script>
    import Header from "../../components/Header";
    export default {
        name: "RepairOrder",
      components:{Header},
      data(){
          return{
            position:{
              secondTitle:'运维决策',
              thirdTitle:'故障管理'
            },
            drawer:false,
            expands: [],
            testData:[
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
              {
                id:'123456789',//工单id
                deviceId:'10001',//设备号
                device:'电机轴承模块',//设备名称
                fault:'传动端内外圈剥离',//故障名
                beginDate:'2020.03.07',//开始时间
                finishDate:'2020:03:07',//派单时间
                principal:'刘琦',//负责人
                principalTel:'15901023397',//负责人联系方式
                engineer:'田伟',//工程师
                engineerTel:'17765214560',//工程师联系方式
                progress:'3',//进度条
                summary:''//总结
              },
            ],
          }
      },
      methods:{
      }
    }
</script>

<style scoped>
  .icon-plus{
    width: 25%;
  }
  .plus-icon-enter-to{
    width: 25%;
  }
  .plus-icon-enter-active{
    transition: width .5s;
  }
  .plus-icon-enter{
    width: 0px;
  }
  .plus-icon-leave{
    width: 25%;
  }
  .plus-icon-leave-active{
    transition: width .5s;
  }
  .plus-icon-leave-to{
    width: 0px;
  }
</style>
